<template>
    <div class="history">
        <el-card>
            <div slot="header">
                <el-button style="padding: 0; font-size: 16px;" icon="el-icon-tickets" type="text">历史计划都在这哦～</el-button>
            </div>
            <div>
                <el-button v-show="historyList.length !== 0" type="warning" size="medium" icon="el-icon-arrow-up" plain @click="activeNames = []">全部收起</el-button>
                <el-button type="info" size="medium" icon="el-icon-d-arrow-left" plain @click="$router.push('home')">返回首页</el-button>
                <el-divider></el-divider>
                <div v-if="historyList.length === 0">
                    <el-card shadow="hover" :body-style="{lineHeight: '28px'}">
                        暂无历史计划哦～
                    </el-card>
                </div>
                <div class="main-content" v-else>
                    <el-collapse v-model="activeNames">
                        <el-collapse-item v-for="(item, index) in historyList" :key="item.date" :name="index">
                            <template slot="title">
                                {{item.title}}<el-divider direction="vertical"></el-divider>
                                <el-tag size="mini" type="info">{{item.date}}</el-tag><el-divider direction="vertical"></el-divider>
                                <el-tag size="mini" :type="item.state === '1' ? 'success' : 'danger'">{{item.state === '1' ? '已完成' : '未完成'}}</el-tag>
                            </template>
                            <div>{{item.content}}</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeNames: [],
            historyList: []
        }
    },
    mounted() {
        this.getHistoryList()
    },
    methods: {
        getHistoryList(){
            this.$http({
                url: 'phpbin/tomorrowplan/getPlanList.php',
                method: 'get'
            }).then(res => {
                let list = res.data.content.list
                this.historyList = list.sort((a, b) => {
                    return new Date(b.date) - new Date(a.date)
                })
            })
        }
    },
}
</script>

<style lang="less" scoped>
.history{
    padding: 50px;
    .el-tag{
        font-size: 12px;
    }
    .main-content{
        height: calc(100vh - 290px);
        overflow: scroll;
    }
}
</style>